<template>
  <div class="linningPage">

    <pageLoading v-if="page.loading" :size="600"></pageLoading>

    <div class="linning-main" v-if="!page.loading">

      <div class="lining-main-form">

        <Form :model="formItem" :label-width="100">

          <Form-item label="面料选择:">

            <template v-for="item in formItem.list">
              <div class="form-item" :class="{'form-item_active':item.id == formItem.selectIndex}" @click="selectItem(item.id)">

                <div class="form-item-selectBox">
                   {{item.name}}
                </div>

                <div class="form-item-pic">

                  <img :src="item.img" alt="">

                </div>

              </div>
            </template>

          </Form-item>

        </Form>

        <div class="content-page">
          <Page :total="formItem.total" v-show="formItem.total>8" :page-size="8" @on-change="goto" :current="formItem.page"></Page>
        </div>

      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext"></bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
          是否确认选择该面料？
        </h2>
      </Modal>

    </div>

  </div>
</template>
<script>
  import {mapMutations, mapState} from 'vuex';
  import {getlinning} from "api/getlinning";
  import bottomBtn from "base/bottomBtn.vue"
  import pageLoading from "base/pageLoading"

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        formItem:{
          selectIndex:-1,
          list:[],
          total:0,
          page:1
        },
        modal:{
          state:false
        }
      }
    },
    methods: {
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setLinlingId":"SET_LINGINGID"
      }),
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      selectItem(id){
        this.formItem.selectIndex = id;
      },
      goto(page){
        this._getList(page);
      },
      pageNext(){
        this.$el.querySelector(".form-item_active")?this.modal.state = true:this.$Notice.info({title: '错误', desc:'没有选择任何面料'});
      },
      asyncOK(){
        this.setNavIndex(this.navIndex + 1);
        this.setLinlingId(this.formItem.selectIndex);
      },
      _getList(page = 1) {
        if(!this.type){return}
        this.page.loading = true;
        getlinning({id: this.type,p:page,goods:this.goodsId}).then((Rs) => {
          this.page.loading = false;
          this.formItem.list = Rs.data.info;
          this.formItem.total = Rs.data.totalLine;
          this.formItem.page = page;
        }).catch((error)=>{
          this.setNavIndex(1);
        })
      },
      _jugeData(){
        if(this.goodsId === ""){
          this.pagePrev();
        }
      }
    },
    components: {
      bottomBtn,
      pageLoading
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex'
      ])
    },
    mounted() {

    },
    updated(){

    },
    created() {
      this._getList();
    },
    activated(){
       this._jugeData();

    },
    deactivated(){

    },
    watch:{
      goodsId(){
        this._getList();
      }
    }
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";

  .linningPage{
    .lining-main-form{
      padding: 25px 0;

      .ivu-form-item-label{
        text-align: center;
        font-size: 14px;
      }

      .form-item{
        width: 134px;
        height: 184px;
        float: left;
        margin-left:40px;
        margin-top: 10px;
        transition: all 0.3s;
        cursor: pointer;

        &:hover{
          .form-item-selectBox{
            background: rgb(157,40,40);
            color: #fff;
          }
        }

        &_active{
          .form-item-selectBox{
            background: rgb(157,40,40);
            color: #fff;
          }
        }

        &-selectBox{
          width: 100%;
          height: 45px;
          line-height: 45px;
          text-align: center;
          color: #333;
          background: #f7f7f7;
          font-size: 18px;
          border: 1px solid #ccc;
          border-radius: 5px;
          letter-spacing: 2px;
          transition: all 0.3s;
        }

        &-pic{
           height: 140px;
           width: 130px;
           vertical-align: middle;
           text-align: center;
           line-height: 140px;
           img{
             width: 86px;
             height: 111px;
             vertical-align: middle;
           }
        }
      }

      .ivu-form-item-content{
        .clearfix();
      }
    }

    .content-page{
      text-align: center;
    }
  }

</style>
